<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>贵客点餐</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

 <script src="//cdn.bootcss.com/jquery/2.1.1-rc1/jquery.min.js"></script>
  <script type="text/javascript">
  var w,h,className;
  function getSrceenWH(){
    w = $(window).width();
    h = $(window).height();
    $('#dialogBg').width(w).height(h);
  }

  window.onresize = function(){  
    getSrceenWH();
  }  
  $(window).resize();  

  $(function(){
    getSrceenWH();
    
    //显示弹框
    $('.join .fl').click(function(){
      
      $('#dialogBg').fadeIn(300);
      $('#dialog').removeAttr('class').addClass('animated').fadeIn();
    });
    
    //关闭弹窗
    $('.claseDialogBtn').click(function(){
      $('#dialogBg').fadeOut(300,function(){
        $('#dialog').addClass('bounceOutUp').fadeOut();
      });
    });
  });
  </script>

  <style>
  *{font-family: Microsoft YaHei;}
  body{margin:0;}
  h1,h2,h3{font-weight: normal;}
  ul{margin:0;padding: 0;}
  a{text-decoration: none;}
  li{list-style: none;}
  .clear{zoom:1;}
  .clear::after{content: '';display: block;clear:both;}
  .fl{float: left;}  .fr{float: right;}
  .text_l{text-align: left;}
  .text_r{text-align: right;}
  .text_c{text-align: center;}
  /* ----- */
  @font-face{
    font-family: 'youyuan';
    src: url('/font/ziti.TTF');
  }
  .logo{padding-top: 20px;}
  .logo span{color:#fff;padding-top: 20px;letter-spacing: 1px;padding-left: 35px;background: url('/images/sj.png') no-repeat left 15px;background-size: 30px;}
  .banner_wrap{width: 100%;height:766px;background: url('/images/bg_1.jpg') no-repeat center center;}
  .banner{width:1024px;margin:0 auto;}
  .banner>.main{margin-top: 68px;}
  .banner>.main .hand{margin-left:-100px;}
  .banner .word{margin-left: 50px;}
  .banner .word h1,.banner .word p{color:#fff;font-family: 'youyuan'}
  .banner .word h1{font-size: 60px;}
  .banner .word p{font-size:30px;margin:5px 0;}
  .banner .join{margin-top:80px;width: 450px;}
  .banner .join span{display: inline-block;width: 200px;height:60px;line-height: 60px;text-align: center;color:#fff;font-size:20px;border-radius: 3px;cursor: pointer;}
  .banner .join span.fl{background:#FCB040; }
  .banner .join span.fr{border:3px solid #fff;width: 192px;height: 52px;line-height: 52px;}

  .show_wrap{width: 100%;background: url('/images/bg_2.png') no-repeat center center;margin-top:-5px;padding: 80px 0;}
  .show_wrap>p{text-align: center;font-size: 30px;margin-top:0;letter-spacing: 2px; color:#222;}
  .show {position: relative;}
  .show .item{padding-top: 100px;}
  
  .show .item img{width: 80%;}
  .item_c{width:30%!important;padding: 0!important;}
  .item_c img{width: 62%!important;}

  .ways_wrap{width: 100%;background: #fff;padding: 30px 0;}
  .ways_wrap>p{text-align: center;font-size: 25px;color:#333;letter-spacing: 2px;}
  .ways{width: 1280px;margin:0 auto;text-align: center;}
  .way{display: inline-block;margin:0 15px;}
  .way>span{display: block;text-align: center;margin-top:30px;font-size:18px;}
  .way img{width: 90%;}

  .backstage_wrap{width: 100%;background: #f2f2f2;padding: 80px 0 30px 0;}
  .backstage{width: 1280px;margin:0 auto;}
  .backstage .word{width: 430px;padding:50px 0 0 30px;}
  .backstage .word h1{color:#444;letter-spacing: 2px;}
  .backstage .word h2{color:#FCB040;font-size: 20px;}
  .backstage .word p{color:#555;line-height: 1.8;font-size: 17px;}
  .backstage .computer{width: 700px;}
  .backstage .join{margin-top:80px;width: 380px;}
  .backstage .join span{display: inline-block;width: 150px;height:50px;line-height: 50px;text-align: center;color:#fff;font-size:20px;border-radius: 3px;cursor: pointer;}
  .backstage .join span.fl{background:#FCB040; }
  .backstage .join span.fr{border:3px solid #666;width: 144px;height: 44px;line-height: 44px;color:#666;}
  
  .why_wrap{width: 100%;background: #fff;background: url('/images/bg_3.png') no-repeat center center;background-size:auto 70% ; padding: 0 0 70px 0;}
  .why_wrap>p{text-align: center;font-size:30px;letter-spacing: 2px;color: #333;margin:50px ;}
  .why{width: 1020px;margin:0 auto;}
  .why .pro{width: 300px;margin:50px 0;}
  .why .pro h3{ background: url('/images/dian.png') no-repeat left 8px;border-bottom: 1px dotted #999;padding-left: 30px;font-size: 20px;padding-bottom: 5px;} 
  .why .pro p{padding-left: 30px;color:#999;font-size: 17px;letter-spacing: 1px;}

  .footer{width: 100%;background: #313944;padding: 20px 0;}
  .footer p{color:#fff;margin: 12px 0;text-align:center;}
  .footer .foot_1{font-size: 18px;}


/* 弹出框 */
  #dialogBg{width:100%;height:100%;background-color:#000000;opacity:.6;filter:alpha(opacity=60);position:fixed;top:0;left:0;z-index:9999;display:none;}
#dialog{width:30%;margin:0 auto;display:none;background-color:#ffffff;position:fixed;top:30%;margin-left:35%;z-index:10000;border:1px solid #ccc;border-radius:10px;}
.dialogTop{width:90%;margin:0 auto;border-bottom:1px dotted #ccc;letter-spacing:1px;padding:10px 0;text-align:right;}
.dialogIco{width:50px;height:50px;position:absolute;top:-25px;left:50%;margin-left:-25px;}
.editInfos{padding:15px 0;}
.editInfos li{width:90%;margin:8px auto auto;text-align: center;}
.ipt{border:1px solid #ccc;padding:5px;border-radius:3px;margin-left:5px;width: 50%;}
.ipt:focus{outline:none;border-color:#66afe9;box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);-webkit-box-shadow:0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);}
.submitBtn{width:90px;height:30px;cursor:pointer;margin-top:10px;display:inline-block;border-radius:5px;text-align:center;background-color:#FAAF40;color:#fff;border:none;}
  </style>
</head>
<body>
  <div class="banner_wrap">
    <div class="banner">
      <div class="logo clear"><img src="/images/logo.png" alt="" class="fl"><span class="fr">入驻热线: 13678038076</span></div>
      <div class="main clear">
        <div class="hand fl"><img src="/images/hand.png" alt=""></div>
        <div class="word fl">
          <h1>贵客点餐平台</h1>
          <p>让每一张餐桌都是一本菜单</p>
          <p style="font-family:Optima">Give guests the best experience</p>
          <div class="join clear">
            <span class="fl">我要加入</span>
            
          </div>
        </div>
      </div>      
    </div>
  </div>
  <div class="show_wrap">
    <p>客人点餐演示</p>
    <div class="show clear">
      <div class="item fl" style="width:17%;padding-top:115px;">
        <img src="/images/show_1.png" alt="简介">
      </div>
      <div class="item fl text_c"  style="width:18%;">
        <img src="/images/show_2.png" alt="简介">
      </div>
      
      <div class="item item_c fl text_c"  style="width:30%;">
        <img src="/images/show_c.gif" alt="简介">
      </div>
      <div class="item fr text_r"  style="width:17%;padding-top:115px;">
        <img src="/images/show_4.png" alt="简介">
      </div>
      <div class="item fr text_c"  style="width:18%;">
        <img src="/images/show_3.png" alt="简介" >
      </div>
    </div>
  </div>
  <div class="ways_wrap">
    <p>简单五步，轻松点餐</p>
    <div class="ways">
      <div class="way">
        <img src="/images/way_1.png" alt="">
        <span>扫码</span>
      </div>
      <div class="way">
        <img src="/images/way_2.png" alt="">
        <span>点开菜单</span>
      </div>
      <div class="way">
        <img src="/images/way_3.png" alt="">
        <span>选择餐品</span>
      </div>
      <div class="way">
        <img src="/images/way_4.png" alt="">
        <span>支付菜单</span>
      </div>
      <div class="way">
        <img src="/images/way_5.png" alt="">
        <span>马上上菜</span>
      </div>
    </div>
  </div>
  <div class="backstage_wrap">
    <div class="backstage clear">   
        <div class="computer fr"><img src="/images/computer.png" alt=""></div>
        <div class="word fl">
          <h1>后台管理系统</h1>
          <h2>点餐管理系统轻松管理餐厅</h2>
          <p>用户统计、订单查询、菜品统计，轻松管理餐厅点餐业务。精准到每个餐桌的所有客户点餐数据。跟踪每个商家的熟客以往点餐数据。</p>
          <div class="join clear">
            <span class="fl">我要加入</span>
          
          </div>
        </div>
    </div>
  </div>
  <div class="why_wrap">
    <p>为什么选择我们？</p>
    <div class="why clear">
      <div class="fl">
        <div class="pro">
          <h3>免费的互联网餐厅系统</h3>
          <p>平台提供全新的餐厅流程，点餐和菜单,结算一体化。</p>
        </div>
        <div class="pro">
          <h3>支持先付费，后付费多种餐厅经营模式</h3>
          <p>可选择先付费或者后付费模式，顾客亦可选择线上支付或申请现金支付，让您餐厅经营更灵活</p>
        </div>
        <div class="pro">
          <h3>免费的互联网餐厅系统</h3>
          <p>精准到每个餐桌的所有客户点餐数据。跟踪每个商家的熟客以往点餐数据。</p>
        </div>
      </div>
      <div class="fr">
        <div class="pro">
          <h3>支持对接各种外卖订单</h3>
          <p>系统支持对接各大外卖平台，外卖订单也不错过。</p>
        </div>
        <div class="pro">
          <h3>线上支付直接和银行合作，安全快速</h3>
          <p>线上支付直接和银行合作，安全快速资金结算直接到银行卡。</p>
        </div>
      </div>
    </div>
  </div>
  <div class="footer">
    <p class="foot_1">扫一扫，都是贵客</p>
    <p class="foot_2">贵客点餐商家入驻热线: 13678038076 </p>
    <p class="foot_3">service@guikpay.com</p>
  </div>

  
<!-- 弹出框 -->
<div id="dialogBg"></div>
<div id="dialog" class="animated">
  <img class="dialogIco" width="50" height="50" src="/images/ico.png" alt="" />
  <div class="dialogTop">
    <a href="javascript:;" class="claseDialogBtn">关闭</a>
  </div>
  <form action="" method="post" id="editForm">
    <ul class="editInfos">
      <li><label><font color="#ff0000">* </font>商户名称：<input type="text" name="" required value="" class="ipt" /></label></li>
      <li><label><font color="#ff0000">* </font>您的名字：<input type="text" name="" required value="" class="ipt" /></label></li>
      <li><label><font color="#ff0000">* </font>联系电话：<input type="text" name="" required value="" class="ipt" /></label></li>
      <li><label>所在城市：<input type="text" name="" value="" class="ipt" /></label></li>
      <li><label>商户地址：<textarea  class="ipt"></textarea></label></li>
      <li><label>经营范围：<textarea  class="ipt" rows="3"></textarea></label></li>
      <li><input type="submit" value="确认提交" class="submitBtn" /></li>
    </ul>
  </form>
</div>


</body>
</html>


